<template>
<!--  文章分页展示组件-->
  <scrollpage :loading="loading" :offset="offset" :no-data="noData" @load="load">
    <articleItem v-for="article in articles" v-bind="article" :key="article.id">

    </articleItem>
  </scrollpage>
</template>

<script>
import scrollpage from "@/components/scrollpage";
import articleItem from "@/components/articleItem";
import {getAllArticle} from "@/api/article";

export default {
  name: "articleScrollPage",
  props:{
    //传入对象 可以随意添加值
    query:{
      type:Object,
      default(){
        return{}
      }
      // tagId:Number,
      // categoryId:Number,
    }
  },
  components:{
    scrollpage,
    articleItem
  },
  data(){
    return{
      loading: false,
      noData: false,
      offset:0,
      articles:[],
      PageParams:{
        page: 1,
        pageSize: 10,
        tagId:null,
        categoryId:null,
        searchVal:''
      }
    }
  },
  methods:{
    load() {
      // alert("触发")
      this.getArticles()
    },
    getArticles() {
      this.loading=true;
      this.PageParams.tagId=this.query.tagId;
      this.PageParams.categoryId=this.query.categoryId;
      this.PageParams.searchVal=this.query.searchVal;
      getAllArticle().then((res) => {
        if(res.data.success){
            if(res.data.length<=0){
              //没数据 不触发分页数据
              this.noData=true;
            }
            //连接分页数据
          this.articles=this.articles.concat(res.data.data)
          this.PageParams.page += 1;
        }else {
          this.$message.error(res.data.msg)
        }
      }).catch((err)=>{
        this.$message.error("系统错误")
      }).finally(()=>{
        this.loading=false;
      })
    }

  },
  created() {
    this.getArticles()
  },
 /* watch:{
    PageParams:{
      deep:true,
      handler(newValue,oldValue){
        console.log("aa")
        if(newValue === null){
          this.$router.push({path:'/}'})
        }
        this.getArticles()
      }
    }
  }*/
}
</script>

<style scoped>

</style>
